<template>
  <!-- <view class="w-750rpx m-a bg-#fff"
    :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
    @click="handleClick"
  >
    <view class="flex-sb pl-32rpx pr-32rpx pt-16rpx pb-16rpx">
      <view class="w-478rpx">
        <view class="font-size-32rpx ellipsis-2 font-bold">{{ data.title || '--' }}</view>
        <view class="color-#666 font-size-28rpx">
        </view>
        <view class="mt-20rpx color-#BBB font-size-26rpx">
          {{ formatDate(new Date(data.startTime), 'YYYY-MM-DD') }}
          ~
          {{ formatDate(new Date(data.endTime), 'YYYY-MM-DD') }}
        </view>
      </view>
      
      <base-img-box :size="176" :imgSrc="getPreUrl(data)" />
    </view>
    <view class="border-1px"></view>
  </view> -->

  <view class="w-center bg-#fff rounded-28rpx !mt-24rpx"
    :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
    style="box-shadow: 0 2rpx 8rpx 0 rgba(0,0,0,0.25);"
    @click="handleClick"
  >
    <view class="flex box-border px-32rpx pt-32rpx">
      <view class="font-size-28rpx leading-32rpx ellipsis-2 font-bold flex-1">
        {{ data.title || '--' }}
      </view>
      <view class="w-170rpx h-44rpx relative bg-linear-8 rounded-68rpx color-#fff flex-center !inline-flex ml-6rpx">
        <view class="inline-block font-size-22rpx leading-0">了解活动详情</view>
      </view>
    </view>

    <view class="px-32rpx flex items-center pt-12rpx">
      <view class="bg-#986DF0 rounded-8rpx color-#fff font-size-24rpx leading-23rpx py-8rpx px-10rpx"
        :class="[{ 'bg-#BBB': data.status == 2 }]"
      >
        {{ statusOption[data.status] || '报名中' }}
      </view>
      <view class="font-size-24rpx ml-12rpx">
        活动时间：
        {{ formatDate2(data.startTime, 'YYYY-MM-DD') }}
        ~
        {{ formatDate2(data.endTime, 'YYYY-MM-DD') }}
      </view>
    </view>
    
    <view class="px-32rpx font-size-24rpx mt-6rpx">
      活动地点：
      <text v-if="data.provinceName !== data.cityName">
        {{ data.provinceName || '-' }}{{ data.cityName || '-' }}{{ data.districtName || '-' }}
      </text>
      <text v-else>
        {{ data.cityName || '-' }}{{ data.districtName || '-' }}
      </text>
    </view>

    <view class="px-32rpx mt-12rpx flex-sb-center">
      <base-img-box 
        v-for="item in getImagesList(data)"
        :key="item.id"
        :size="186" 
        :round="12" 
        :imgSrc="item.preUrl" 
        :thumbnailPreUrl="item.thumbnailPreUrl"
      />

      <view class="w-186rpx h-186rpx"
        v-if="getImagesList(data).length === 2"
      ></view>
    </view>
    
    <view class="px-32rpx flex-sb-center pt-12rpx pb-16rpx">
      <view class="font-size-26rpx color-#606060">
        计划人数: {{ data.participantsCount || 0 }}人
      </view>
      <!-- <view class="bg-#986DF0 rounded-44rpx color-#fff font-size-28rpx w-130rpx h-44rpx flex-center leading-0"
        v-if="data.status != 2"
      >
        去报名
      </view> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import baseImgBox from "@/components/base/base-img-box.vue";
import { useThemeStore, useUserStore } from '@/store';
import { formatDate2 } from "@/utils";
import { useToast } from "wot-design-uni";

const emit = defineEmits(['end'])
// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
})

const statusOption = ref({
  1: '进行中',
  2: '已结束',
  3: '筹备中',
})

const toast = useToast();
const handleClick = () => {
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  if (!user.getUseVo.userProfileInfoVo.nickname) {
    setTimeout(() => {
      uni.navigateTo({ url: '/activity/info' });
    }, 1000)
    toast.show({ msg: '请先完善个人资料', duration: 3000 });
    return;
  }
  if (!user.activityInfo.id) {
    toast.show('请先填写资料');
    setTimeout(() => {
      uni.navigateTo({ url: '/activity/addActivityInfo' })
    }, 1000)
    return
  }
  // if (props.data.status == 2) return emit('end');
  uni.navigateTo({ 
    url: `/activity/activityDetail?id=${props.data.id}`
  })
}

// 获取图片
const getImagesList = computed(() => {
  return (item) => {
    const imagesList = item.imagesList || [];
    if (imagesList.length > 3) {
      imagesList.length = 3;
    }
    return imagesList
  }
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
